<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- 
        浮动元素的特点:
            1）浮动元素脱标 （半脱离，有字围效果）
     -->
    <div class="box">
        <div class="item" style="float:left; width:100px; height:100px; background:red">son1</div>
        <!-- 浮动元素是半脱离标准文档流，证明：字围效果 -->
        <div style="width:140px; height:140px; background: lawngreen"">hello</div>
    </div>
</body>

</html>